<!-- 开票信息管理 -->
<template>
  <div class="invoice-management-wrap flx-column">
    <el-button class="position-btn" type="primary" @click="openInvoicingDrawer">添加开票抬头</el-button>
    <div class="flx-1">
      <ProTable ref="proTable" :columns="columns" :toolButton="false" :requestApi="getList">
        <!-- 默认抬头 -->
        <template #defaultHeadUp="{ row }">
          <el-switch v-model="row.defaultHeadUp"></el-switch>
        </template>

        <!-- 操作 -->
        <template #operation>
          <el-button link type="primary">复制</el-button>
          <el-button link type="primary">编辑</el-button>
          <el-button link type="danger">删除</el-button>
        </template>
      </ProTable>
    </div>
  </div>

  <!-- 添加开票抬头 -->
  <add-invoice-info ref="addInvoiceInfoRef" @close="showAddInvoiceInfo = false" :visible="showAddInvoiceInfo" />
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import AddInvoiceInfo from "./components/AddInvoiceInfo.vue";

// 获取开票类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// 表格配置项
const columns = reactive([
  {
    prop: "billingType",
    columnKey: "billingType",
    label: "开票类型",
    width: 104,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "headUpType",
    columnKey: "headUpType",
    label: "抬头类型",
    minWidth: 104,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "title",
    label: "公司/抬头名称",
    minWidth: 120
  },
  {
    prop: "iDNumber",
    label: "公司税号/身份证号",
    minWidth: 147
  },
  {
    prop: "registeredAddress",
    label: "注册地址",
    minWidth: 147
  },
  {
    prop: "registeredPhone",
    label: "注册电话",
    minWidth: 129
  },
  {
    prop: "depositaryBank",
    label: "开户银行",
    minWidth: 129
  },
  {
    prop: "bankAccount",
    label: "银行账户",
    minWidth: 129
  },
  {
    prop: "defaultHeadUp",
    label: "默认抬头",
    minWidth: 103
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 140,
    fixed: "right"
  }
]);

// @@@
const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [{}]
      }
    });
  });
};
// @@@

// 申请开票
const addInvoiceInfoRef = ref();
const showAddInvoiceInfo = ref(false);
const openInvoicingDrawer = row => {
  showAddInvoiceInfo.value = true;
  nextTick(() => {
    addInvoiceInfoRef.value.acceptParams({
      title: "添加开票信息",
      id: row.id
    });
  });
};
</script>

<style lang="scss" scoped>
.invoice-management-wrap {
  .position-btn {
    position: absolute;
    right: 0;
    top: 0px;
  }
}
</style>
